{%- liquid
  assign show_padding = true
  assign bg_full = true
  assign rounded = false
  assign default_background = false
  unless section.settings.padding_to_full_section
    assign show_padding = false
    assign bg_full = false
  endunless
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
      assign rounded = true
    when 'secondary'
      assign background_color = 'bg-secondary'
      assign rounded = true
    when 'inverse'
      assign background_color = 'bg-inverse'
      assign rounded = true
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
      assign default_background = true
    when 'black'
      assign background_color = 'bg-black'
      assign rounded = true
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  case section.settings.image_width
    when 'adapt_to_image'
      assign image_width = 'w-100'
    when 'one_quarter'
      assign image_width = 'w-25'
    when 'one_third'
      assign image_width = 'w-33'
    when 'half'
      assign image_width = 'w-50'
    when 'full'
      assign image_width = 'w-100'
  endcase

  if section.settings.desktop_columns_per_row >= section.blocks.size
    assign pc_columns_per_row = section.blocks.size
  else 
    assign pc_columns_per_row = section.settings.desktop_columns_per_row
  endif

  if pc_columns_per_row > 3
    assign tablet_columns_per_row = 3
  else
    assign tablet_columns_per_row = 2
  endif

  assign mob_columns_per_row = section.settings.mob_columns_per_row | plus: 0
  if section.blocks.size >= mob_columns_per_row
    assign mob_columns_per_row = mob_columns_per_row
  else 
    assign mob_columns_per_row = 1
  endif

  case section.settings.desktop_text_alignment
    when 'center'
      assign text_alignment = 'text-lg-center'
    else
      assign text_alignment = 'text-lg-start'
  endcase

  case section.settings.mob_text_alignment
    when 'center'
      assign text_alignment = text_alignment | append: ' text-center'
    else
      assign text_alignment = text_alignment | append: ' text-start'
  endcase
  

  if default_background == false and bg_full == false
    assign column_rounded = 'rounded-2 overflow-hidden'
  else
    if section.settings.image_width == 'full'
      assign image_rounded = 'rounded-2'
    endif 
  endif

  if bg_full == false and default_background == false
    if pc_columns_per_row > 4
      assign image_padding_x = 'px-md-4 px-lg-3'
      assign text_padding_x = 'px-md-4 px-lg-3'
      if section.settings.image_width != 'full'
        assign column_padding_y = 'py-md-4 py-lg-3'
      else
        assign image_padding_x = 'px-0'
        assign text_padding_y = 'pb-md-4 pb-lg-3'
      endif
    elsif pc_columns_per_row == 4
      assign image_padding_x = 'px-md-4'
      assign text_padding_x = 'px-md-4'

      if section.settings.image_width != 'full'
        assign column_padding_y = 'py-md-4'
      else
        assign image_padding_x = 'px-0'
        assign text_padding_y = 'pb-md-4'
      endif
    elsif pc_columns_per_row == 3
      assign image_padding_x = 'px-md-4 px-lg-5'
      assign text_padding_x = 'px-md-4 px-lg-5'

      if section.settings.image_width != 'full'
        assign column_padding_y = 'py-md-4 py-lg-5'
      else
        assign image_padding_x = 'px-0'
        assign text_padding_y = 'pb-md-4 pb-lg-5'
      endif
    elsif pc_columns_per_row == 2
      assign image_padding_x = 'px-md-5 px-lg-6'
      assign text_padding_x = 'px-md-5 px-lg-6'
      if section.settings.image_width != 'full'
        assign column_padding_y = 'py-md-5 py-lg-6'
      else
        assign image_padding_x = 'px-0'
        assign text_padding_y = 'pb-md-5 pb-lg-6'
      endif
    else
      assign image_padding_x = 'px-4 px-lg-7'
      assign text_padding_x = 'px-4 px-lg-7'
      if section.settings.image_width != 'full'
        assign column_padding_y = 'py-4 py-lg-7'
      else
        assign image_padding_x = 'px-0'
        assign text_padding_y = 'pb-4 pb-lg-7'
      endif
    endif


    if section.settings.image_width != 'full'
      if mob_columns_per_row == 2
        assign image_padding_x = image_padding_x | append: ' px-2'
        assign text_padding_x = text_padding_x | append: ' px-2'
        assign column_padding_y = column_padding_y | append: ' py-3'
      else
        assign image_padding_x = image_padding_x | append: ' px-5'
        assign text_padding_x = text_padding_x | append: ' px-5'
        assign column_padding_y = column_padding_y | append: ' py-5'
      endif
    else
      if mob_columns_per_row == 2
        assign text_padding_x = text_padding_x | append: ' px-2'
        assign text_padding_y = text_padding_y | append: ' pb-3'
      else
        assign text_padding_x = text_padding_x | append: ' px-5'
        assign text_padding_y = text_padding_y | append: ' pb-5'
      endif
    endif
  else
    assign image_padding_x = ''
    assign text_padding_x = ''
    if section.settings.image_width != 'full'
      assign column_padding_y = ''
    else
      assign image_padding_x = ''
    endif
  endif

  assign gutter = ''
  assign header_margin = 'mb-1'
  assign btn_margin = 'mt-2'
  assign image_padding_bottom = 'pb-4 pb-lg-3'
  assign heading_size = ''
  assign text_size = ''
  if bg_full == false and default_background == false
    if pc_columns_per_row >= 5
      assign gutter = 'gx-3 gy-3 gy-md-4'
    else
      assign gutter = 'gx-3 gx-md-4 gy-3 gy-md-4'
    endif
  else
    assign gutter = 'gx-3 gx-md-4'
    if pc_columns_per_row >= 5
      assign gutter = gutter | append: ' gx-lg-3'
    else
      assign gutter = gutter | append: ' gx-lg-4'
    endif


    assign gutter = gutter | append: ' gy-md-7'

    if pc_columns_per_row <= 2
      assign gutter = gutter | append: ' gy-lg-8'
    else
      assign gutter = gutter | append: ' gy-lg-7'
    endif

    if mob_columns_per_row == 2
      assign gutter = gutter | append: ' gy-5'
    else
      assign gutter = gutter | append: ' gy-7'
    endif
  endif
  
  if pc_columns_per_row > 3
    assign heading_size = 'lead fw-bold'
  elsif pc_columns_per_row <= 2
    assign header_margin = 'mb-1 mb-lg-2'
    assign btn_margin = 'mt-2 mt-lg-3'
    if pc_columns_per_row == 2
      assign image_padding_bottom = 'pb-4 pb-lg-5'
      assign heading_size = 'fs-3'
    else
      assign image_padding_bottom = 'pb-4 pb-lg-6'
      assign heading_size = 'fs-2'
    endif
    assign text_size = 'lead'
  elsif pc_columns_per_row == 3
    assign image_padding_bottom = 'pb-4'
    assign heading_size = 'fs-4'
  endif

  case section.settings.image_ratio
    when 'portrait'
      assign image_ratio = 'ratio ratio-4x5'
    when 'square'
      assign image_ratio = 'ratio ratio-1x1'
    when 'circle'
      assign image_ratio = 'ratio ratio-1x1 rounded-circle'
      assign image_rounded = 'rounded-circle'
    else
      assign image_ratio = 'ratio'
      assign first_ratio = 1
      for block in section.blocks
        if forloop.first and block.settings.image
          assign first_ratio = block.settings.image.aspect_ratio
          break
        endif
      endfor
  endcase

  if section.settings.enable_swipe and section.blocks.size > mob_columns_per_row
    assign tablet_columns_per_row = 2
    assign mob_swipe = "mob-scroll"
    assign mob_wrap = 'flex-nowrap flex-lg-wrap'
    if mob_columns_per_row == 2
      assign mob_wrap = mob_wrap | append: ' pe-scroll-2 pe-lg-0'
    else
      assign mob_wrap = mob_wrap | append: ' pe-scroll-1 pe-lg-0'
    endif
  endif

  assign link_for_column = false
  if bg_full == false and default_background == false
    assign link_for_column = true
  endif
%}

<div class="{% if show_padding %} py-section{% else %}my-section{% endif %} {% if bg_full %}{{ background_color }}{% endif %}">
  <div class="container d-flex flex-column {% if section.settings.padding_to_full_section %} {{ text_color }} {% endif %}">
    {%- liquid
      if section.settings.button_position == 'top'
        assign heading_margin = 'mb-5 mb-md-4 mb-lg-5'
      elsif section.settings.button_position == 'bottom'
        assign heading_margin = 'mb-lg-6 mb-5'
      endif
    -%}
    {% if section.settings.heading != empty or section.settings.text != empty %}
      <div class="no-last-margin mw-text-5 {{ heading_margin }} order-1 {% if section.settings.heading_alignment == 'center' %}text-center mx-auto{% else %}text-start{% endif %}">
        {%- if section.settings.heading != empty -%}
          <h2 class="h1 mb-2">{{ section.settings.heading }}</h2>
        {%- endif -%}
        {%- if section.settings.text != empty -%}
          <div class="richtext-with-link ">{{ section.settings.text | replace: '<p>', '<p class="mb-0">' }}</div>
        {%- endif -%}
      </div>
    {% endif %}
  
    <div class="order-3 {{ mob_swipe }} {% unless section.settings.padding_to_full_section %} {{ text_color }} {% endunless %}">
      <div class="row {{ gutter }} row-cols-{{ mob_columns_per_row }} row-cols-md-{{ tablet_columns_per_row }} row-cols-lg-{{ pc_columns_per_row }} {{ mob_wrap }}">
        {%- for block in section.blocks -%}
          {%- liquid
            assign show_stretched_link = true
            if block.settings.button_link != blank
              assign stretched_link = block.settings.button_link
            elsif block.settings.button_link_2 != blank
              assign stretched_link = block.settings.button_link_2
            else
              assign show_stretched_link = false
            endif       
          %}
          {%- if block.type == 'column' -%}
            <div class="col">
              <div class="{% unless bg_full %}{{ background_color }}{% endunless %} {{ text_alignment }} {{ column_rounded }} {{ column_padding_y }} position-relative h-100">
                {%- if block.settings.image -%}
                  <div class="{{ image_padding_x }} {{ image_padding_bottom }}">
                    {%- liquid
                      if section.settings.image_width == 'adapt_to_image'
                        assign max_width_style = ' style="max-width: ' | append: block.settings.image.width | append: 'px;"'
                      endif
                    -%}
                    <div class="d-inline-block align-middle {{ image_width }}" {{ max_width_style }}>
                      <div class="{{ image_ratio }}"          
                        {% if section.settings.image_ratio == 'adapt_to_image' %}
                          style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"
                        {% elsif section.settings.image_ratio == 'adapt_to_first_image' %}
                          style="--se-aspect-ratio: {{ 1 | divided_by: first_ratio | times: 100 }}%;"
                        {% endif %}>
                        <img class="object-fit-cover w-100 h-100 {{ image_rounded }}" 
                          srcset="{%- if block.settings.image.width >= 180 -%}{{ block.settings.image | img_url: '180x' }} 180w,{%- endif -%}
                            {%- if block.settings.image.width >= 240 -%}{{ block.settings.image | img_url: '240x' }} 240w,{%- endif -%}
                            {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                            {%- if block.settings.image.width >= 480 -%}{{ block.settings.image | img_url: '480x' }} 480w,{%- endif -%}
                            {%- if block.settings.image.width >= 720 -%}{{ block.settings.image | img_url: '720x' }} 720w,{%- endif -%}
                            {%- if block.settings.image.width >= 960 -%}{{ block.settings.image | img_url: '960x' }} 960w,{%- endif -%}    
                            {%- if block.settings.image.width >= 1200 -%}{{ block.settings.image | img_url: '1200x' }} 1200w,{%- endif -%}
                            {%- if block.settings.image.width >= 2400 -%}{{ block.settings.image | img_url: '2400x' }} 2400w{%- endif -%}"
                          src="{{ block.settings.image | img_url: '600x' }}"
                          sizes="(min-width: 1025px) {% if pc_columns_per_row == 1 %}1200px{% elsif pc_columns_per_row == 2 %}600px{% else %}360px{% endif %},
                          (min-width: 750px) {% if pc_columns_per_row <= 2 %}calc(100vw - 32px){% else %}360px{% endif %},
                          calc(100vw - 30px)"
                          alt="{{ block.settings.image.alt | escape }}"
                          loading="lazy"
                          width="{{ block.settings.image.width }}"
                          height="{{ block.settings.image.height }}" >
                        {%- if section.settings.enable_image_link -%}
                          {%- if show_stretched_link -%}
                            <a {% render 'link', link: block.settings.button_link %} 
                              href="{{ stretched_link }}"
                              class="stretched-link"></a>
                          {%- endif -%}
                        {%- endif -%}
                      </div>
                    </div>
                  </div>
                {%- else -%}
                  <div class="{{ image_padding_x }} {{ image_padding_bottom }}">
                    {%- liquid
                      if section.settings.image_width == 'adapt_to_image'
                        assign image_width = 'w-50'
                      endif
                    -%}
                    <div class="d-inline-block align-middle {{ image_width }}">
                      <div class="{{ image_ratio }}"
                        {% if section.settings.image_ratio == 'adapt_to_image' %}
                          style="--se-aspect-ratio: {{ 1 | divided_by: 1 | times: 100 }}%;"
                        {% elsif section.settings.image_ratio == 'adapt_to_first_image' %}
                          style="--se-aspect-ratio: {{ 1 | divided_by: first_ratio | times: 100 }}%;"
                        {% endif %}>
                        {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg w-100 h-100' }}
                        {%- if section.settings.enable_image_link -%}
                          {%- if show_stretched_link -%}
                            <a {% render 'link', link: block.settings.button_link %} 
                              href="{{ stretched_link }}"
                              class="stretched-link"></a>
                          {%- endif -%}
                        {%- endif -%}
                      </div>
                    </div>
                  </div>
                {%- endif -%}
                <div class="{{ text_padding_x }} {{ text_padding_y }}">
                  {%- if block.settings.heading != blank -%}
                    <h3 class="title {{ heading_size }} {{ header_margin }}">{{ block.settings.heading }}</h3>
                  {%- endif -%}
                  {%- if block.settings.description != blank -%}

                    {% assign richTextContent = block.settings.description %}
                    {% assign links = richTextContent | split: '<a ' %}
                    {% assign endLink = "" %}
                    {% for link in links %}
                      {% if link contains 'href="' %}
                        {% assign startLink = link | split: 'href="' | last %}
                        {% assign endLink = startLink | split: '"' | first %}
                      {% endif %}
                    {% endfor %}
                    {% if endLink contains 'https://' %}
                      <div class="description {{ text_size }} no-last-margin richtext-with-link {{ richtext_link_style }}">{{ block.settings.description | replace: '<a', '<a target="_blank" rel="noopener nofollow"' }}</div>
                    {% else %}
                      <div class="description {{ text_size }} no-last-margin richtext-with-link {{ richtext_link_style }}">{{ block.settings.description }}</div>
                    {% endif %}
                    
                  {%- endif -%}

                  {% if block.settings.button_label != blank or block.settings.button_label_2 != blank %}                   
                    <div class="mb-n2 mx-n3">
                      {%- if link_for_column -%}
                        {%- if section.settings.enable_image_link -%}
                          {%- if show_stretched_link -%}
                            <a {% render 'link', link: block.settings.button_link %} 
                              href="{{ stretched_link }}"
                              class="stretched-link"></a>
                          {%- endif -%}
                        {%- endif -%}
                        {%- if block.settings.button_label != blank -%}
                            {% if block.settings.button_link != blank %}
                              <a data-1="{{ link_for_column }}"  data-2="{{ section.settings.enable_image_link }}" data-3="{{ show_stretched_link }}" {% render 'link', link: block.settings.button_link %} href="{{ block.settings.button_link }}" class="first-btn-link btn btn-link link-{{ btn_style }} with-stretched-link {{ btn_margin }} mb-2 mx-3">
                                {{ block.settings.button_label }}
                              </a>
                            {% else %}
                              <div class="first-btn-link btn btn-link link-{{ btn_style }} with-stretched-link {{ btn_margin }} mb-2 mx-3 disabled cursor-default">
                                {{ block.settings.button_label }}
                              </div>  
                            {% endif %}
                        {%- endif -%}
                      {%- else -%}
                        {%- if block.settings.button_label != blank -%}
                          {% if block.settings.button_link != blank %}
                            <a {% render 'link', link: block.settings.button_link %} href="{{ block.settings.button_link }}" class="first-btn-link btn btn-link link-{{ btn_style }} with-stretched-link {{ btn_margin }} mb-2 mx-3">
                              {{ block.settings.button_label }}
                            </a>
                          {% else %}
                            <div class="first-btn-link btn btn-link link-{{ btn_style }} with-stretched-link {{ btn_margin }} mb-2 mx-3 disabled cursor-default">
                              {{ block.settings.button_label }}
                            </div>  
                          {% endif %}
                        {%- endif -%}
                      {%- endif -%}

                      {%- if block.settings.button_label_2 != blank -%}
                        {% if block.settings.button_link_2 %}
                          <a {% render 'link', link: block.settings.button_link_2 %} href="{{ block.settings.button_link_2 }}" class="second-btn-link btn btn-link link-{{ btn_style }} with-stretched-link {{ btn_margin }} mb-2 mx-3">
                            {{ block.settings.button_label_2 }}
                          </a>
                        {% else %}
                          <div class="second-btn-link btn btn-link link-{{ btn_style }} with-stretched-link {{ btn_margin }} mb-2 mx-3 disabled cursor-default">
                            {{ block.settings.button_label_2 }}
                          </div>
                        {% endif %}
                      {%- endif -%}
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          {%- endif -%}
        {%- endfor -%}
      </div>
    </div>
    
    {%- if section.settings.button_label_1 != empty -%}
      {%- liquid
        if section.settings.button_position == 'top'
          assign btn_wrapper_style = 'mb-5 mb-md-7 order-2'
        elsif section.settings.button_position == 'bottom'
          assign btn_wrapper_style = 'mt-5 mt-lg-6 order-3'
        endif

        case section.settings.text_color
          when 'white'
            if section.settings.padding_to_full_section
              assign outer_btn_style = 'light'
            else
              assign outer_btn_style = 'primary'
            endif
          else
            assign outer_btn_style = 'primary'
        endcase

        if section.settings.show_button_icon
          assign outer_btn_style = outer_btn_style | prepend: 'outline-'
        endif
      -%}
      <div class="text-center {{ btn_wrapper_style }}">
        {% if section.settings.button_link_1 != blank %}
          <a {% render 'link', link: section.settings.button_link_1 %} href="{{ section.settings.button_link_1 }}" class="{% if section.settings.show_button_icon%}d-inline-flex{% endif %} btn btn-{{ outer_btn_style }}">
            {%- if section.settings.show_button_icon -%}
            <span class="d-inline-flex me-2 icon-wrap-md">{%- liquid
              case section.settings.button_icon
                when 'question'
                  render 'icon-question'
                when 'telephone'
                  render 'icon-telephone'
                when 'email'
                  render 'icon-email'
                when 'chat'
                  render 'icon-chat'
                when 'gift'
                  render 'icon-gift'
                when 'heart'
                  render 'icon-heart'
                when 'location'
                  render 'icon-location-support'
              endcase
            -%}</span>{{ section.settings.button_label_1 }}
          {%- else -%}
            {{ section.settings.button_label_1 }}
          {%- endif -%}
          </a>
        {% else %}
          <div class="{% if section.settings.show_button_icon%}d-inline-flex{% endif %} btn btn-{{ outer_btn_style }} disabled cursor-default">
            {%- if section.settings.show_button_icon -%}
            <span class="d-inline-flex me-2 icon-wrap-md">{%- liquid
              case section.settings.button_icon
                when 'question'
                  render 'icon-question'
                when 'telephone'
                  render 'icon-telephone'
                when 'email'
                  render 'icon-email'
                when 'chat'
                  render 'icon-chat'
                when 'gift'
                  render 'icon-gift'
                when 'heart'
                  render 'icon-heart'
                when 'location'
                  render 'icon-location-support'
              endcase
            -%}</span>{{ section.settings.button_label_1 }}
          {%- else -%}
            {{ section.settings.button_label_1 }}
          {%- endif -%}
          </div>  
        {% endif %}
      </div>
    {%- endif -%}
  </div>
</div>

{% schema %}
  {
    "name": "Multicolumn",
    "tag": "section",
    "class":"multicolumn",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Text columns with images"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Description"
      },
      {
        "type": "select",
        "id": "heading_alignment",
        "label": "Heading alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "image_width",
        "label": "Image width",
        "options": [
          {
            "value": "adapt_to_image",
            "label": "Adapt to image"
          },
          {
            "value": "one_quarter",
            "label": "One-quarter width of column"
          },
          {
            "value": "one_third",
            "label": "One-third width of column"
          },
          {
            "value": "half",
            "label": "Half width of column"
          },
          {
            "value": "full",
            "label": "Full width of column"
          }
        ],
        "default": "adapt_to_image"
      },
      {
        "type": "select",
        "id": "image_ratio",
        "label": "Image shape",
        "options": [
          {
            "value": "adapt_to_first_image",
            "label": "Adapt to first image"
          },
          {
            "value": "adapt_to_image",
            "label": "Adapt to image"
          },
          {
            "value": "portrait",
            "label": "Portrait"
          },
          {
            "value": "square",
            "label": "Square"
          },
          {
            "value": "circle",
            "label": "Circle"
          }
        ],
        "default": "adapt_to_image"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "checkbox",
        "id": "padding_to_full_section",
        "label": "Add background color to the full section",
        "default": false
      },
      {
        "type": "range",
        "id": "desktop_columns_per_row",
        "min": 2,
        "max": 6,
        "step": 1,
        "default": 3,
        "label": "Desktop columns per row"
      },
      {
        "type": "select",
        "id": "desktop_text_alignment",
        "label": "Desktop text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "radio",
        "id": "mob_columns_per_row",
        "label": "Mob columns per row",
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          }
        ],
        "default": "2"
      },
      {
        "type": "select",
        "id": "mob_text_alignment",
        "label": "Mob Text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "checkbox",
        "id": "show_button_icon",
        "label": "Show button icon",
        "default": false
      },
      {
        "type": "select",
        "id": "button_position",
        "label": "Button position",
        "options": [
          {
            "value": "top",
            "label": "Top"
          },
          {
            "value": "bottom",
            "label": "Bottom"
          }
        ],
        "default": "bottom"
      },
      {
        "type": "select",
        "id": "button_icon",
        "label": "Button icon",
        "options": [
          {
            "value": "question",
            "label": "Question"
          },
          {
            "value": "telephone",
            "label": "Telephone"
          },
          {
            "value": "email",
            "label": "Email"
          },
          {
            "value": "chat",
            "label": "Chat"
          },
          {
            "value": "gift",
            "label": "Gift"
          },
          {
            "value": "heart",
            "label": "Heart"
          },
          {
            "value": "location",
            "label": "Location"
          }
        ],
        "default": "question"
      },
      {
        "type": "text",
        "id": "button_label_1",
        "default": "Button label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link_1",
        "label": "Button link"
      },
      {
        "type": "checkbox",
        "id": "enable_swipe",
        "label": "Enable swipe on mobile",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "enable_image_link",
        "label": "Enable image link",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "column",
        "name": "Column",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "Text columns with images",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "description",
            "default": "<p>Describe the feature，service or product that this icon represents</p>",
            "label": "Description"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          },
          {
            "type": "text",
            "id": "button_label_2",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Button link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Multicolumn",
        "blocks": [
          {
            "type": "column"
          },
          {
            "type": "column"
          },
          {
            "type": "column"
          }
          ]
      }
    ]
  }
{% endschema %}